<template>
  <div class="container">
    <div class="data-box" style="height: 540px;">

    <!-- 搜索框 -->
      <MySearch @parent-searchBtn="searchBtn" ></MySearch>

      <div class="add" style="width:100px;height:40px; float: right; margin-bottom: -10px;">
        <el-button size="mini" type="primary" @click="handleAdd()" style="width: 80px">
          新增
        </el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="领养日期">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.adoptDate | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="领养 ID">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>用户ID: {{ scope.row.userId }}</p>
              <p>宠物ID: {{ scope.row.petId }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.adoptId }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页按钮 -->
    <div class="pagination-box">
      <my-pagination
        style="text-align: right; margin-right: 100px"
        @parent-getData="getData"
        :dataCount="dataCount"
      ></my-pagination>
    </div>

    <!-- 编辑弹出框 -->
    <div class="container" style="display: inline-block">
      <!-- Form -->
      <el-dialog :title="editBoxTitle" :visible.sync="dialogFormVisible">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户 ID" label-width="68px">
            <el-input v-model="formInline.userId"></el-input>
          </el-form-item>
          <el-form-item label="宠物 ID">
            <el-input v-model="formInline.petId"></el-input>
          </el-form-item>
          <el-form-item label="领养时间">
            <div class="block">
              <el-date-picker
                v-model="formInline.adoptDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancelBtn()">取 消</el-button>
          <el-button type="primary" @click="handleConfirmBtn()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 编辑弹出框多的end -->

  </div>
</template>

<script>
import MySearch from '@/components/MySearch.vue';
export default {
    data() {
        return {
            pageNum: 1,
            dataCount: 0,
            tableData: [],
            dialogFormVisible: false,
            formInline: {
                adoptId: "",
                userId: "",
                petId: "",
                adoptDate: ""
            },
            editBoxTitle: "修改领养信息" // 编辑框的标题
        };
    },
    mounted() {
        this.getData(this.pageNum, 5); //初始化首页数据
        this.getDataCount(); // 初始化分页标签数据
    },
    methods: {
        handleAdd() {
            this.editBoxTitle = "添加领养信息"; // 编辑框标题
            this.dialogFormVisible = true; // 打开编辑框
            this.formInline = {}; // 初始化form表单
        },
        handleEdit(data) {
            this.editBoxTitle = "修改领养信息";
            this.dialogFormVisible = true;
            this.initFormInline(data); // 初始化显示该编辑数据
        },
        handleDelete(index, itemData) {
            this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.onDelData(itemData.adoptId); // 执行删除
            }).then(() => {
                this.tableData.splice(index, 1); // 更新列表数据
                this.getData(this.pageNum, 5); // 更新数据
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },
        handleCancelBtn() {
            this.dialogFormVisible = false;
            this.formInline = {};
        },
        handleConfirmBtn() {
            if (this.editBoxTitle == "修改领养信息") {
                this.onUpdate();
            }
            else {
                this.onAddData();
            }
        },
        // 根据页码发起请求获取数据
        getData(pageNum, pageSize) {
            // 分页组件调用此方法时，更新当前页码
            this.pageNum = pageNum;
            this.$axios
                .get("adopt/getByPage?pageNum=" + pageNum + "&pageSize=" + pageSize)
                .then((result) => {
                this.tableData = result.data;
            })
                .catch((err) => {
                alert(err);
            });
        },
        // 获取数据的总条数
        getDataCount() {
            this.$axios
                .get("adopt/getDataCount")
                .then((result) => {
                this.dataCount = result.data;
            })
                .catch((err) => {
                alert(err);
            });
        },
        // 发起请求添加数据
        onAddData() {
            this.$axios.post("adopt/insertAdopt", {
                userId: this.formInline.userId,
                petId: this.formInline.petId,
                adoptDate: this.formInline.adoptDate
            }).then((result) => {
                if (result.data == 1) {
                    this.dialogFormVisible = false;
                    // 添加数据后刷新数据
                    this.getData(this.pageNum, 5);
                    this.getDataCount();
                    this.$message({
                        showClose: true,
                        message: "添加成功！",
                        type: "success",
                    });
                }
                this.formInline = {};
            }).catch((err) => {
                alert(err);
            });
        },
        // 发起请求删除数据
        onDelData(adoptId) {
            this.$axios.get("adopt/deleteAdoptById?adoptId=" + adoptId)
                .then((result) => {
                if (result.data == 1) {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                }
                else {
                    this.$message({
                        showClose: true,
                        message: "删除失败",
                        type: "warning"
                    });
                }
            }).catch((err) => {
                this.$message({
                    showClose: true,
                    message: "错误信息：" + err,
                    type: "warning"
                });
            });
        },
        // 发起请求更新数据
        onUpdate() {
            this.$axios
                .post("adopt/updateAdoptById", {
                adoptId: this.formInline.adoptId,
                userId: this.formInline.userId,
                petId: this.formInline.petId,
                adoptDate: this.formInline.adoptDate
            })
                .then((result) => {
                if (result.data == 1) {
                    this.dialogFormVisible = false;
                    // 编辑数据后刷新数据
                    this.getData(this.pageNum, 5);
                }
            })
                .then(() => {
                this.$message({
                    showClose: true,
                    message: "更新成功！",
                    type: "success",
                });
            })
                .catch((err) => {
                alert(err);
            });
        },
        initFormInline(data) {
            let newForm = {
                adoptId: data.adoptId,
                userId: data.userId,
                petId: data.petId,
                adoptDate: data.adoptDate
            };
            this.formInline = newForm;
        },
        searchBtn(value) {
            if (value != "") {
                let newTable = this.tableData.filter(item => item.adoptId == value);
                this.tableData = newTable;
            }
            else {
                this.getData(this.pageNum, 5);
            }
        }
    },
    components: { MySearch }
};
</script>
<style>
.demo-form-inline {
  padding: 0px 20px;
}
.el-form-item .el-input {
  width: 250px;
}
.el-input.el-input--small{
  width: 150px;
}
</style>